<!--
 * @Author: your name
 * @Date: 2020-03-25 12:58:16
 * @LastEditTime: 2020-04-02 22:31:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-imooc-ebook\src\views\ebook\index.vue
 -->
<template>
  <div class="ebook" ref="ebook">
    <Ebook-header></Ebook-header>
    <ebook-title></ebook-title>
    <ebook-reader></ebook-reader>
    <ebook-menu></ebook-menu>
    <ebook-bookmark></ebook-bookmark>
    <EbookFooter></EbookFooter>
  </div>
</template>

<script>
  import { setReadLog } from '../../api/store'
  import EbookReader from '../../components/ebook/EbookReader'
  import EbookTitle from '../../components/ebook/EbookTitle'
  import EbookMenu from '../../components/ebook/EbookMenu'
  import EbookBookmark from '../../components/ebook/EbookBookmark'
  import EbookHeader from '../../components/ebook/EbookHeader'
  import EbookFooter from '../../components/ebook/EbookFooter'
  import { getReadTime, saveReadTime, getProgress } from '../../utils/localStorage'
  import { ebookMixin } from '../../utils/mixin'
  export default {
    mixins: [ebookMixin],
    components: {
    // 注册组件
    EbookReader,
    EbookTitle,
    EbookMenu,
    EbookBookmark,
    EbookHeader,
    EbookFooter
    },
    // 监听offsetY变化,v新的offsetY的值
    watch: {
      offsetY(v) {
        if (!this.menuVisible && this.bookAvailable) {
          if (v > 0) {
            this.move(v)
          } else if (v === 0) {
            // 还原
              this.restore()
            }
        }
      }
    },
    methods: {
      // 还原
      restore() {
        this.$refs.ebook.style.top = 0 + 'px'
        // 还原时，增加一个过度动画
        this.$refs.ebook.style.transition = 'all .2s linear'
        // 0.2s结束后将transition动画清除掉，第二次下拉不流畅问题
        setTimeout(() => {
          this.$refs.ebook.style.transition = ''
        }, 200)
      },
      // 移动index
      move(v) {
        this.$refs.ebook.style.top = v + 'px'
      },
      // 开始循环计算readtime
      startLoopReadTime() {
        // console.log('startLoopReadTime')
        // 获取localStorage中的readtime
        let readTime = getReadTime(this.fileName)
        if (!readTime) {
          readTime = 0
        }
        // 实现记录阅读时间的功能，启动定时任务,setinterval启动定时任务，定时任务的间隔为一秒,每一秒++
        // 做一个++,readtime的单位为秒，
        this.task = setInterval(() => {
          readTime++
          // 每半分钟会记录一次localStorge
          if (readTime % 30 === 0) {
            console.log('readTime', readTime)
            saveReadTime(this.fileName, readTime)
            console.log('存储阅读时间', this.fileName, readTime)
          }
        }, 1000)
      }
    },
    mounted () {
      console.log('进入startLoopReadTime()')
      this.startLoopReadTime()
    },
    // 在当前组件销毁时
    beforeDestroy () {
      console.log('退出时候阅读器')
      if (this.task) {
      // 对当前定时任务进行终止
      clearInterval(this.task)
      // 将时间跟进度传给陈凤，  和当前的时间和书（已登陆）
      // 获取退出阅读器阅读时间
      const endReadTime = getReadTime(this.fileName)
      console.log('退出时候的总时间', endReadTime, typeof (endReadTime))
      // 获取退出时阅读进度
      // const endProgress = getProgress(this.fileName)
      console.log('打印阅读进度', this.progress, typeof (this.progress))
    //  向后台发送阅读时间,进度API
      // console.log('阅读结束向后台发送阅读时间,进度')
      setReadLog(this.fileName.split('/')[1], endReadTime, this.progress)
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../../assets/styles/global";
  .ebook {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
